<section ng-controller="StatsController">

    <h1>Statistics</h1>

    <h2>Topics</h2>
    <div class="row stats">
        <div class="col-md-3">
            <h4>Total</h4>
            <h3>{{topics.total}}</h3>
        </div>

        <div class="col-md-3">
            <h4>Ack ALL</h4>
            <h3>{{topics.ackAll.count}} ({{topics.ackAll.ratio | number:1}}%)</h3>
        </div>

        <div class="col-md-3">
            <h4>Tracking enabled</h4>
            <h3>{{topics.tracked.count}} ({{topics.tracked.ratio | number:1}}%)</h3>
        </div>

        <div class="col-md-3">
            <h4>Avro</h4>
            <h3>{{topics.avro.count}} ({{topics.avro.ratio | number:1}}%)</h3>
        </div>
    </div>

    <h2>Subscriptions</h2>
    <div class="row stats">

        <div class="col-md-3">
            <div class="tile">
                <h4>Total</h4>
                <h3>{{subscriptions.total}}</h3>
            </div>
        </div>

        <div class="col-md-3">
            <h4>Tracking enabled</h4>
            <h3>{{subscriptions.tracked.count}} ({{subscriptions.tracked.ratio | number:1}}%)</h3>
        </div>

        <div class="col-md-3">
            <h4>Avro</h4>
            <h3>{{subscriptions.avro.count}} ({{subscriptions.avro.ratio | number:1}}%)</h3>
        </div>
    </div>

</section>
